<template>
  <div>
    <!--  卡片 -->
    <el-card class="box-card" style="padding:0px;">
      <h2>我的信息</h2>
      <div class="userinfo infoadm">
        <el-row :gutter="20">
          <el-col :xs="24" :md="10"
            ><div class="grid-content bg-purple welcome">
              <h3>
                容量使用
                <span class="welcome_btn" @click="CamiDialogVisible = true"
                  >扩 容</span
                >
              </h3>
              <el-progress
                class="welcome_progress"
                :show-text="false"
                :stroke-width="12"
                :percentage="capacity"
              ></el-progress>
              <p class="space">
                当前空间：
                {{
                  (userinfo.maxcapacity - userinfo.capacity).toFixed(2) + "MB"
                }}
                / {{ userinfo.maxcapacity + "MB" }}
              </p>
            </div></el-col
          >
          <el-col :xs="24" :md="6"
            ><div class="grid-content bg-purple total_img">
              <div class="content">
                <i class="el-icon-folder-opened"></i>
                <span>我的图片：{{ file_total }}</span>
              </div>
            </div></el-col
          >
          <el-col :xs="24" :md="8"
            ><div class="grid-content bg-purple web_info">
              <div class="key">
                <div class="key_title">Key</div>
                <p class="key_content">{{ userinfo.key }}</p>
              </div>
            </div></el-col
          >
        </el-row>
      </div>
    </el-card>
    <!-- 使用卡密对话框 -->
    <el-dialog
      title="扩容"
      :visible.sync="CamiDialogVisible"
      :width="clientWidth"
      @close="CamiClose"
    >
      <el-form
        ref="CamiformRef"
        :model="camiForm"
        label-width="80px"
        :rules="CamiRules"
      >
        <el-form-item label="卡密" prop="key">
          <el-input v-model="camiForm.key"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CamiClose">取 消</el-button>
        <el-button type="primary" @click="CamiDalog_click">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 用户信息
      userinfo:  JSON.parse(sessionStorage.getItem("userinfo")),
      // 图片总数
      file_total: 0,
      // 使用卡密对话框
      CamiDialogVisible: false,
      // 卡密对话框 表单数据 对象
      camiForm: {
        key: "",
      },
      // 注册表单验证规则
      CamiRules: {
        key: [{ required: true, message: "请输入卡密", trigger: "blur" }],
      },
    };
  },
  created() {
    this.get_file_total();
    console.log(this.userinfo);
  },
  methods: {
    // 获取用户图片总数
    async get_file_total() {
      const { data: res } = await this.$http.get("allimg", {
        params: { id: this.userinfo.id },
      });
      this.file_total = res.data.total;
    },
    // 卡密对话框确认按钮
    CamiDalog_click() {
      this.$refs.CamiformRef.validate(async (valid) => {
        if (!valid) {
          this.$message.error("请正确的填写表单！");
          return;
        }
        // 发送请求
        const { data: res } = await this.$http.post("/cami", {
          key: this.camiForm.key,
          id: this.userinfo.id,
        });
        if (res.meta.status != 200) {
          this.$message.error(res.meta.msg);
          return;
        }
        this.$message.success("扩容成功！");
        this.CamiDialogVisible = false;
      });
    },
    // 卡密对话框关闭触发
    CamiClose() {
      this.CamiDialogVisible = false;
      this.$refs.CamiformRef.resetFields();
    },
  },
  computed: {
    // 获取已经使用的容量
    capacity() {
      let num = (this.userinfo.maxcapacity - this.userinfo.capacity).toFixed(2);
      return Math.round((num / this.userinfo.maxcapacity) * 10000) / 100.0;
    },
    // 对话框宽度 计算函数
    clientWidth() {
      let clientWidth = document.documentElement.clientWidth;
      if (clientWidth < 768) {
        return "85%";
      } else {
        return "50%";
      }
    },
  },
};
</script>

<style scoped>
h2 {
  color: #676a6c;
}
/* .el-card__body {
  padding: 10px 0px !important;
} */
.userinfo {
  margin-top: 10px;
  display: flex;
  padding: 0;
}
.welcome {
  overflow: hidden;
  flex: 6;
  background: #23b7e5;
  border-radius: 10px;
  height: 200px;
}
.welcome h3 {
  margin: 15px 0px 0px 10px;
  color: #fff;
  font-size: 24px;
}
.welcome_btn {
  font-size: 12px;
  display: inline-block;
  padding: 0 10px;
  height: 23px;
  line-height: 23px;
  text-align: center;
  color: #fff;
  background: #ff5722;
  cursor: pointer;
}
.welcome_progress {
  margin: auto;
  margin-top: 80px;
  width: 70%;
}
.welcome .space {
  margin-top: 10px;
  text-align: center;
  color: #fff;
}
.total_img {
  overflow: hidden;
  margin-left: 20px;
  flex: 3;
  background: #23c6c8;
  border-radius: 10px;
  height: 200px;
}
.total_img .content {
  margin: 20px 15px;
  color: #fff;
  font-weight: 700;
}
.total_img .content i {
  font-size: 23px;
  margin-right: 5px;
}
.total_img .content span {
  font-size: 20px;
}
.web_info {
  margin-left: 20px;
  flex: 3;
  border-radius: 10px;
  height: 200px;
}
.web_info .key .key_title {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #23b7e5;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  border-radius: 5px;
}
.web_info .key .key_content {
  text-align: center;
  margin-top: 10px;
  font-weight: 600;
  padding: 8px 0px;
  border-top: 1px solid #ddd;
  font-size: 14px;
}
.el-divider--horizontal {
  margin: 0;
}
.el-row {
  margin: 0 !important;
}

@media screen and (max-width: 992px) {
  .total_img {
    margin: 0;
    margin-top: 20px;
  }
  .web_info {
    margin: 0;
    margin-top: 20px;
  }
}
.infoadm {
  animation: infoadm 1s ;
  animation-fill-mode: forwards;
}
@keyframes infoadm {
  0% {
    transform: translate(100%,0);
    opacity: 0;
  }
  100% {
    transform: translate(0%,0);
    opacity: 1;

  }
}
</style>
